<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>

    <div id="graph"></div>

    <script src="js/g6.js"></script>
    <script>
        window.onload = function () {
            // 待渲染数据
            const data = {
                nodes: [
                    {
                        id: '1',
                        label: 'alps_file1',
                        // 单独设置节点类型及样式
                        // 是在数据中嵌入
                        type: 'circle',
                        style:{
                            // 半径
                            r: 30,
                            storke: 'yellowgreen',
                            lineWidth: 5
                        }
                    },
                    {
                        id: '2',
                        label: 'alps_file2',
                        type: 'rect',
                        style:{
                            width: 100,
                            height: 40,
                            radius: 6,
                            lineWidth: 2
                        }
                    },
                    {
                        id: '3',
                        label: 'alps_file3',
                        // 椭圆
                        type: 'ellipse',
                        style:{
                            rx: 50,
                            ry: 20
                        }
                    },
                    {
                        id: '4',
                        label: 'sql_file1',
                        // 菱形
                        type: 'diamond',
                        style:{
                            lineWidth: 2
                        },
                        size:[100,50]
                    },
                ],
                edges: [
                    {
                        source: '1',
                        target: '2',
                        type: 'line',
                        // 线的label(文字或其他)
                        label: 'line'
                    },
                    {
                        source: '1',
                        target: '3',
                        // 多段线
                        type: 'polyline',
                        label: 'polyline'
                    },
                    {
                        source: '2',
                        target: '4',
                        type:  'arc',
                        label: 'arc',
                    },
                    {
                        source: '3',
                        target: '4',
                        type: 'cubic',
                        label: 'cubic'
                    },
                ],
            };

            const graph = new G6.Graph({
                container: 'graph',
                width: window.innerWidth,
                height: window.innerHeight,
                // 布局设置
                layout: {
                    type: 'dagre'
                },
                // 默认节点设置
                defaultNode: {
                    type: 'rect',
                    // 默认节点样式
                    style: {
                        radius: 4,
                        lineWidth: 2,
                        // 节点内部填充颜色
                        fill: '#fff',
                        // 节点边框颜色
                        stroke: '#ffc0cb',
                        shadowColor: '#ffc0cb',
                        shadowBlur: 20,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        cursor: 'move',
                    },
                    // 节点内容
                    labelCfg: {
                        style: {
                            fontSize: 14,
                            fill: '#1890ff',
                            cursor: 'move'
                        }
                    }
                },
                // 默认边的配置
                defaultEdge: {
                    type: 'polyline'
                },
                // 适应视图大小
                fitView: true,
                // 添加渲染视图 padding
                fitViewPadding: 100
            });

            //读取数据
            graph.read(data);
        }
    </script>
</body>

</html>